<template>
  <!-- 装在 box 盒子里 -->
  <div class="box">
    <!-- 侧边栏 -->
    <aside class="animate__animated animate__bounceInLeft sidebar">
      <!-- 头像 -->
      <div class="avatar">
        <img :src="require('@/assets/img/avatars/3.jpg')"/>
      </div>

      <!-- 导航栏 -->
      <nav class="nav">
        <a v-for="intro in introduceList" @click="showSection(intro.name)" :key="intro.id"><i :class="intro.icon" style="margin-right: 10px"></i> {{intro.title}}</a>
      </nav>
    </aside>

    <!-- 内容显示 用 section 进行选择显示-->
    <main>
      <!-- 个人资料部分 -->
      <section class="animate__animated animate__fadeInRight" v-if="showSectionId === '#info'" id="info">
        <div>
          <!-- 标题 -->
          <h2 class="title"><i class="el-icon-s-custom"></i> 个人资料</h2>
          <hr>
          <el-row :gutter="20" class="row">
            <!-- 左半部分：内容较短的信息 -->
            <el-col :sm="8" :xs="24" class="col-l-4">
              <p><i class="el-icon-cold-drink" style="margin-right: 5px"></i>昵称：羽恒</p>
              <p><i class="el-icon-male" style="margin-right: 5px"></i>性别：男</p>
              <p><i class="el-icon-goblet-full" style="margin-right: 5px"></i>年龄：21</p>
              <p><i class="el-icon-ship" style="margin-right: 5px"></i>学历：本科</p>
              <p><i class="el-icon-star-off" style="margin-right: 5px"></i>身高：181cm</p>
              <p><i class="el-icon-knife-fork" style="margin-right: 5px"></i>体重：67kg</p>
            </el-col>
            <!-- 右半部分，内容稍长的信息 -->
            <el-col :sm="16" :xs="24" class="col-l-4">
              <p><i class="el-icon-office-building" style="margin-right: 5px"></i>学校：吉林大学</p>
              <p><i class="el-icon-aim" style="margin-right: 5px"></i>专业：软件工程</p>
              <p><i class="el-icon-caret-right" style="margin-right: 5px"></i>QQ：1182071854</p>
              <p><i class="el-icon-caret-right" style="margin-right: 5px"></i>码云仓库：<a href="https://gitee.com/chen-yuheng-118">https://gitee.com/cyh118</a></p>
              <p><i class="el-icon-caret-right" style="margin-right: 5px"></i>cnBlogs：<a href="https://www.cnblogs.com/cyhStudy/">https://www.cnblogs.com/cyhStudy/</a></p>
              <p><i class="el-icon-s-promotion" style="margin-right: 5px"></i>邮箱：<a href="mailto:cyh11820@163.com">cyh11820@163.com</a></p>
            </el-col>
          </el-row>
        </div>
      </section>

      <!--
      &lt;!&ndash; 技能部分 &ndash;&gt;
      <section class="animate__animated animate__fadeInRight" v-show="showSectionId === '#skills'" id="skills">
        <div>
          <h2 class="title"><i class="iconfont icon-zhuanye"></i> 掌握的技能</h2>
          <el-row :gutter="40" class="row scrollable">
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-html"></i>
              </div>
              <div class="skills-title">
                <h3>HTML5</h3>
                <p>熟悉 HTML5 网站的架构和开发</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-css1"></i>
              </div>
              <div class="skills-title">
                <h3>CSS3</h3>
                <p>熟悉使用 CSS3 写响应式网站、动画等</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-logo-javascript"></i>
              </div>
              <div class="skills-title">
                <h3>JavaScript</h3>
                <p>能使用 JS 制作简单的程序、交互与后端数据的获取</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-Vue"></i>
              </div>
              <div class="skills-title">
                <h3>Vue</h3>
                <p>熟悉Vue的开发流程，能够使用Vue框架开发完整项目</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-java"></i>
              </div>
              <div class="skills-title">
                <h3>Java</h3>
                <p>熟悉Java语言的基本使用，能使用SpringBoot进行后端开发</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-shujujiegou-01"></i>
              </div>
              <div class="skills-title">
                <h3>计算机专业基础</h3>
                <p>熟悉基本的数据结构，算法，计算机网络等相关知识</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </section>
      -->

      <!-- 个人作品部分 -->
      <section class="animate__animated animate__fadeInRight" v-show="showSectionId === '#works'" id="works">
        <div>
          <!-- 标题 -->
          <h2 class="title"><i class="iconfont icon-zuopin1"></i>个人作品</h2>
          <el-row :gutter="30">
            <el-col :xs="24" :sm="12" :lg="8" v-for="work in workList" :key="work.id">
              <!-- 内容分片，用 el-card 装 -->
              <div class="works-item">
                <!-- 卡片前面 -->
                <el-card class="works-item-front">
                  <!-- 作品缩略图 -->
                  <el-image :src="work.picUrl"/>
                  <!-- 作品名称 -->
                  <p>{{work.title}}</p>
                </el-card>

                <!-- 卡片背面 -->
                <el-card class="works-item-back">
                  <!-- 作品描述 -->
                  <p>{{work.content}}</p>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>
      </section>

      <!-- 爱好部分 -->
      <section class="animate__animated animate__fadeInRight" v-show="showSectionId === '#hobbys'" id="hobbys">
          <h2 class="title"><i class="iconfont icon-xingquaihao"></i>我的爱好</h2>
          <div class="row">
            <!-- el 的走马灯展示 -->  <!-- :type 为 card 时，卡片轮播形式 -->
            <el-carousel :interval="2000" :type="cardOpen? 'card':''" height="350px">
              <!-- 循环读取内容 -->
              <el-carousel-item v-for="hobby in hobbyList" :key="hobby.id">
                <!-- el-card展示 -->
                <el-card class="hobby">
                  <!-- 图片 -->
                  <el-image style="width: 100%" :src="hobby.pic_url"></el-image>
                  <!-- 名称 -->
                  <h3 class="tit">{{hobby.name}}</h3>
                  <!-- 描述信息 -->
                  <p>{{hobby.desp}}</p>
                </el-card>
              </el-carousel-item>
            </el-carousel>
        </div>
      </section>

      <!-- 格言部分 -->
      <section class="animate__animated animate__fadeInRight" v-show="showSectionId === '#summary'" id="summary">
        <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
          <h2 class="title"><i class="iconfont icon-ziwopingjia"></i>喜欢的格言</h2>
          <div class="row">
            <ul class="mySentence">
              <li>再小的帆，也可以远航</li>
              <li>种一棵树，最好的时间是十年前，其次————是现在</li>
              <li>所有打不死你的，终结使你更强大</li>
            </ul>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      screenWidth: document.documentElement.clientWidth,  //实时屏幕宽度,
      showSectionId: '#info',
      /* 侧边导航栏列表 */
      introduceList: [
        {
          id: 0,
          title: '资料',
          name: '#info',
          icon:'el-icon-info'
        },
/*        {
          id: 1,
          title: '技能',
          name: '#skills',
          icon:'iconfont icon-jinengliang-xian'
        },*/
        {
          id: 2,
          title: '项目',
          name: '#works',
          icon:'el-icon-folder-opened'
        },
        {
          id: 3,
          title: '爱好',
          name: '#hobbys',
          icon:'el-icon-service'
        },
        {
          id: 4,
          title: '格言',
          name: '#summary',
          icon:'el-icon-chat-line-round'
        },
      ],

      /* 作品列表 */
      workList:[
        {
          id:0,
          name:'',
          desp:'',
          pic_url:''
        }
      ],

      /* 爱好列表 */
      hobbyList:[
        {
          id: 0,
          name:'唱歌',
          pic_url:require("@/assets/img/about/hobby/7.jpg"),
          desp:'喜欢唱歌，经常忍不住就哼歌曲，目前在全民K歌上有录制许多歌曲'
        },
        {
          id: 1,
          name:'看美剧',
          pic_url:require("@/assets/img/about/hobby/8.jpg"),
          desp:'一开始只是想多听听英语听力，但最后发现听力没啥提示，到喜欢上了美剧的紧凑和刺激感'
        },
        {
          id: 2,
          name:'听音乐',
          pic_url:require("@/assets/img/about/hobby/6.jpg"),
          desp:'比较喜欢纯音乐钢琴曲，许嵩，周杰伦等等古风和流行的歌，而且特别喜欢边学习边听'
        },
        {
          id: 3,
          name:'看电影',
          pic_url:require("@/assets/img/about/hobby/5.jpg"),
          desp:'比较喜欢科幻片，虽然没在电影院没看过几部，但这也算一个爱好吧'
        }
      ],
    }
  },
  computed:{
    cardOpen(){
      /* 如果宽度大于这个，则返回真，否则为假 */
      return this.screenWidth >= 748;
    }
  },
  created() {
    window.addEventListener('resize', this.screenAdapter);
    this.getProjects();
  },
  methods: {
    showSection(name) {
      this.showSectionId = name
    },
    // 屏幕尺寸变化的监听函数
    screenAdapter(){
      this.screenWidth = document.documentElement.clientWidth;
    },
    getProjects(){
      this.$basic.get('/project').then(response=>{
        this.workList = response.data.data;
        //console.log(this.workList)
      })
    }
  }
}
</script>

<style scoped lang="less">
  .mySentence li{
    box-sizing: border-box;
    padding: 10px;
  }

  .el-col a:hover{
    color: #409EFF;
    text-decoration: underline;
  }

  body {
    height: 100vh;
    overflow: hidden;
  }

  .box {
    width: 100%;
    height: 100vh;
    position: relative;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    color: #fff;
    width: 250px;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    background: rgba(75, 75, 75, 0.9);

    nav {
      margin: 0;
      display: flex;
      list-style: none;
      flex-direction: column;

      a {
        font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
        list-style: none;
        box-sizing: border-box;
        text-decoration: none;
        color: #fff;
        padding: 1em;
        display: block;
        text-align: center;
        transition: background .3s, box-shadow .3s;
      }

      a:hover {
        background: rgba(60, 60, 60, 1);
      }
    }

    .avatar {
      width: 150px;
      height: 130px;
      margin: 1em auto;
      margin-top: 5em;
      background: #fff;
      border-radius: 100%;
      border: #fff 5px solid;
      transition: transform 0.5s;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 100%;
        border-radius: 50%;
        /*transition: .6s;*/
      }

      img:hover {
        transform: rotate(360deg);
        transition: all 1.5s;
      }

    }
  }

  main {
    color: #353535;
    font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
    box-sizing: border-box;
    margin-left: 250px;

    section {
      top: 50%;
      transform: translateY(-50%);
      position: relative;
      background-color: rgba(255, 255, 255, 0.8);
      border: 3px dashed rgba(0, 0, 0, 0.3);
      border-radius: 20px;
      padding: 20px;
      .title{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        i{
          font-size: larger;
          margin-right: 10px;
        }
      }
      a{
        text-decoration: none;
      }
    }

    section:before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-right: 20px solid rgba(0, 0, 0, 0.3);
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      top: 50%;
      transform: translateY(-50%);
      left: -20px;
    }

    #info {
      .warp {
        .row {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }

    #skills {
      .center-fixed {
        text-align: center;
        display: flex;
        flex-direction: column;

        .skills-icon {
          width: 100px;
          height: 100px;
          margin: 0 auto;
          background: #fff;
          border-radius: 100%;
          box-shadow: 0 5px rgba(0, 0, 0, 0.3);

          i {
            font-size: 50px;
            line-height: 100px;
            transition: all 1s;
          }

          .fa-html5 {
            content: "\f13b";
          }
        }

        .skills-icon:hover {
          i {
            transform: rotate(180deg);
            transition: all 1s;
          }
        }

      }

    }
    #works{
      .el-card /deep/ .el-card__body{
        padding: 0;
      }

      .works-item{
        margin-bottom: 20px;
        position: relative;
        .works-item-front,.works-item-back{
          background-color: white;
          text-align: center;
          border-radius: 5px;
          box-shadow: 0 0 5px 0 #ccc;
          border: 1px solid #5d5d5d;
          transition: all 1s;
          backface-visibility: hidden;
          width: 100%;
          height: 100%;
        }
        .works-item-front{
          .el-image{
            max-width: 100%;
            max-height: 180px;
            border-radius: 5px 5px 0 0;
          }
          p{
            margin-top: 2px;
            margin-bottom: 2px;
            color: #303133;
          }
        }
        .works-item-back{
          box-sizing: border-box;
          padding: 20px;
          position: absolute;
          top: 0;
          background: rgba(255, 255, 255, 0.8);
          transform: rotateY(180deg);
        }
      }
      .works-item:hover {
       .works-item-back{
          transform: rotateY(0deg);
        }
        .works-item-front{
          transform: rotateY(180deg);
        }
      }
    }

    #hobbys{
      .el-card /deep/ .el-card__body{
        padding: 0;
        height: 350px;
      }
      .hobby{
        opacity: 0.9;
        background-color: rgba(255,255,255,0.9);
        box-shadow: none;
        margin-bottom: 20px;
        border-radius: 20px;
        .el-image{
          width: 100%;
          max-height: 200px;
        }
        .tit{
          margin: 0 auto;
          line-height: 20px;
          text-align: center;
        }
        p{
          margin: 0;
          padding: 20px;
          font-size: medium;
        }
      }
    }
    #summary{
      ul{
        li{
          line-height: 50px;
          border-bottom: 2px dashed #63a35c;
          background-color: rgba(0,0,0,0.1);
          margin-bottom: 20px;
          border-radius: 9999px;
          list-style-type: circle;
        }
      }
    }
  }


  @media screen and (max-width: 768px){
    .sidebar{
      position: relative;
      top: 0;
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      .avatar{
        margin: 1rem auto;
        width: 100px;
        height: 100px;
      }
      nav{
        background-color: rgba(255,255,255,0.1);
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
      }
    }
    main{
      margin: 0 auto;
      width: 100%;
      text-align: center;
      section{
        border-radius: 0;
        border: none;
      }
      #summary{
        ul{
          li{
            border-radius: 0;
            border-bottom: none;
            background-color: transparent;
            text-align: left;
          }
        }
      }
    }
  }

</style>
